import React from 'react';
import {IndeterminateComponent} from './ReactWorkTags';
import {render} from './ReactFiberWorkLoop';
import {useReducer,useState,useEffect} from './ReactFiberHooks';
//useState其实是useReducer的语法糖
const reducer = (state, action) => {
  if (action.type === 'add')
    return state + 1;
  else
    return state;
}
//函数组件
function Counter(){
  console.log('渲染');
  /* const [number, setNumber] = useReducer(reducer, 0);
  return (
    //如果想触发点击时间，可以再浏览器控制台执行window.counter.props.onClick()
    <div onClick={() => {setNumber({ type: 'add' })}}>{number}</div>  
  ) */
  const [number, setNumber] = useState(0);
  useEffect(()=>{
     console.log('useEffect1');
     return ()=>{
       console.log('destroy useEffect1');
     }
  });
  useEffect(()=>{
     console.log('useEffect2');
     return ()=>{
       console.log('destroy useEffect2');
     }
  });
  useEffect(()=>{
     console.log('useEffect3');
     return ()=>{
       console.log('destroy useEffect3');
    }
  });


  return (
    <div onClick={() => {setNumber(2)}}>{number}</div>
    
  )
}
debugger
let counterFiber = {
  tag:IndeterminateComponent, //Fiber的类型 函数组件在初次渲染的时候对应的类型 是IndeterminateComponent
  type:Counter,//此组件的具体 类型是个组件
  alternate:null //上一个渲染的fiber
}
render(counterFiber);

